<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" v-model="form" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate"
		 @row-save="rowSave" @on-load="onLoad" :before-open="beforeOpen">
			<template slot-scope="scope" slot="menuForm">
				<el-button type="primary" icon="el-icon-check" :loading="loading" size="mini" @click="submit">提交</el-button>
			</template>
			<template slot="menuRight">
				<el-radio-group @change="searchReset" v-model="status" size="mini" style="margin-right: 50px;">
					<el-radio-button label="">所有</el-radio-button>
					<el-radio-button :label="item.code" v-for="(item,i) in statusItem" :key="i">{{item.name}}</el-radio-button>
				</el-radio-group>
			</template>
			<template slot="expand" slot-scope="{row}">
				<el-row :gutter="6">
					<el-col :span="1"></el-col>
					<el-col :span="3">
						审核人：{{row.auditedBy}}
					</el-col>
					<el-col :span="4">
						审核时间：{{row.auditedOn}}
					</el-col>
					<el-col :span="6">
						审核原因：{{row.reason}}
					</el-col>
					<el-col :span="10">
						备注：{{row.remark}}
					</el-col>
				</el-row>
				<el-row :gutter="6" v-for="(item,index) in row.details" :key="index">
					<el-col :span="1"></el-col>
					<el-col :span="3">
						<el-tag size="mini">{{item.barCode}}</el-tag>
					</el-col>
					<el-col :span="2">
						计划数量：{{item.quantity}}
					</el-col>
					<el-col :span="18">
						已入库：{{item.inQty}}
					</el-col>
				</el-row>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag v-for="(item,i) in statusItem" size="mini" :key="i" :type="item.type" v-if="item.code == row.status">{{item.name}}</el-tag>
			</template>
			<template slot-scope="{row}" slot="detailsForm">
				<storeDtl :data="details" :orderCode="form.orderCode">
				</storeDtl>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="mini" icon="el-icon-edit" v-if="scope.row.status==0" @click.stop="$refs.crud.rowEdit(scope.row,scope.index)">编辑</el-button>
				<el-button type="text" size="mini" icon="el-icon-delete" v-if="scope.row.status==0" @click.stop="$refs.crud.rowDel(scope.row)">删除</el-button>
				<el-button type="text" size="mini" icon="el-icon-circle-check" v-if="scope.row.status==7" @click.stop="isAudit=false;dialogFormVisible = true;form.id=scope.row.id">审核</el-button>
			</template>
		</avue-crud>
		<el-dialog title="审核原因" :visible.sync="dialogFormVisible" v-if='dialogFormVisible' :modal-append-to-body='false'>
			<el-form>
				<el-form-item>
					<el-input v-model="form.reason" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-switch style="margin-right: 30px;" v-model="isAudit" active-text="通过" inactive-text="未通过">
				</el-switch>
				<el-button type="primary" size="mini" @click="submitAudit()">确 定</el-button>
			</div>
		</el-dialog>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import storeDtl from './storeDtl.vue'

	export default {
		components: {
			storeDtl
		},
		data() {
			return {
				type: '',
				loading: false,
				isAudit: false,
				dialogFormVisible: false,
				details: [],
				orderCode: '',
				statusItem: [{
					code: "0",
					type: 'info',
					name: '暂存'
				}, {
					code: "1",
					type: '',
					name: '已提交'
				}, {
					code: "7",
					type: 'success',
					name: '已完成'
				}, {
					code: "8",
					type: 'danger',
					name: '未通过'
				}, {
					code: "9",
					type: 'warning',
					name: '通过'
				}],
				status: "",
				form: {},
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					dialogWidth: 800,
					expand: true,
					dialogDrag: true,
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					editBtn: false,
					delBtn: false,
					menuWidth: '120px',
					column: [{
							label: "入库单号",
							prop: "code",
							width: "150px",
							search: true,
							display: false
						},
						{
							label: "入库订单",
							prop: "orderCode",
							width: "150px",
							type: "select",
							filterable: true,
							searchFilterable: true,
							change: ({
								value,
								column
							}) => {
								if (value != '') {
									this.details = []
								}
							},
							dicData: [],
							props: {
								label: "code",
								value: "code"
							},
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "仓库",
							prop: "storeCode",
							type: "select",
							filterable: true,
							searchFilterable: true,
							group: true,
							dicData: [],
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "计划数量",
							prop: "quantity",
							display: false,
							width: 80
						},
						{
							label: "已入库",
							prop: "inQty",
							display: false,
							width: 80
						},
						{
							label: '备注',
							prop: 'remark',
							maxlength: 200
						},
						{
							label: '状态',
							prop: 'status',
							width: '80px',
							slot: true,
							display: false
						},
						{
							label: "操作时间",
							prop: "createdOn",
							type: "date",
							display: false,
							format: 'yyyy-MM-dd HH:mm',
							width: "120px"
						},
						{
							label: "操作人",
							prop: "createdBy",
							width: "100px",
							display: false
						},
						{
							label: '入库详情',
							prop: 'details',
							formslot: true,
							hide: true,
							span: 24
						}
					]
				},
				data: []
			};
		},
		created() {
			request({
				url: '2/api/OrderIn/pages',
				params: {
					limit: 0,
					status: 1
				}
			}).then(res => {
				this.findObject(this.option.column, 'orderCode').dicData = res.data.data;
			});
			request({
				url: '2/api/WmsStorage/groups',
			}).then(res => {
				this.findObject(this.option.column, 'storeCode').dicData = res.data.data;
			});
		},
		methods: {
			submitAudit() {
				if (this.form.reason == '' && !this.isAudit) {
					this.$message.warning("未通过时请输入原因！");
					return false;
				}
				request({
					url: '2/api/WmsInStorage/audit',
					method: 'post',
					params: {
						id: this.form.id,
						isAudit: this.isAudit,
						reason: this.form.reason,
					}
				}).then(() => {
					this.form.reason = '';
					this.onLoad(this.page);
				});
				this.dialogFormVisible = false;
			},
			beforeOpen(done, type) {
				this.type = type;
				if (["edit"].includes(type)) {
					request({
						url: '2/api/WmsInStorage/detail',
						params: {
							id: this.form.id,
						}
					}).then(res => {
						this.form = res.data.data;
						this.details = this.form.details;
					});
				} else if (["add"].includes(type)) {
					this.form = {};
					this.details = [];
				}
				done();
			},
			submit() {
				this.form.status = 1;
				if (this.type == "add") {
					this.$refs.crud.rowSave();
				} else if (this.type == "edit") {
					this.$refs.crud.rowUpdate();
				}
			},
			rowSave(row, loading, done) {
				row.details = this.details;
				if (row.status == null || row.status == '') {
					row.status = 0;
				}
				this.loading = true
				request({
					url: '2/api/WmsInStorage/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.loading = false;
					this.onLoad(this.query);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				row.details = this.details;
				this.loading = true
				return request({
					url: '2/api/WmsInStorage/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.loading = false;
					this.onLoad(this.query);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return request({
							url: '2/api/WmsInStorage/remove',
							method: 'post',
							params: {
								id: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/WmsInStorage/getpages',
					params: {
						key: this.query.barCode == undefined ? '' : this.query.barCode,
						type: this.query.localCode == undefined ? '' : this.query.localCode,
						status: this.status == undefined ? '' : this.status,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
